<template>
    <div class="common-form" v-if="options">
        <el-form :label-position="options.labelPosition" :model="params" :rules="rules" :disabled="options.isDisabled" :status-icon="true" ref="form" size="mini">
            <template v-for="(row, index) in rows">
                <div class="common-form-row" :key="index">
                    <template v-for="item in row.items">
                        <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :label-width="options.labelWidth + 'px'" v-if="item.type=='text'">
                            <el-input v-model="params[item.prop]" :placeholder="item.placeholder" :disabled="item.isDisabled" clearable @keyup.enter.native="$event.target.blur" @blur="item.handleTextBlur(params[item.prop])">
                                <el-select v-model="item.optionValue" :placeholder="item.optionPlaceholder" :disabled="item.isDisabled" slot="prepend" v-if="item.options">
                                    <template v-for="option in item.options">
                                        <el-option :key="option.value" :label="option.label" :value="option.value"></el-option>
                                    </template>
                                </el-select>
                                <el-button slot="append" :disabled="item.isDisabled" v-if="item.button" @click="item.button.handleInputButtonClick()">{{item.button.label}}</el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :label-width="options.labelWidth + 'px'" v-else-if="item.type=='textarea'">
                            <el-input type="textarea" v-model="params[item.prop]" :placeholder="item.placeholder" :disabled="item.isDisabled" clearable @keyup.enter.native="$event.target.blur" @blur="item.handleTextareaBlur(params[item.prop])">

                            </el-input>
                        </el-form-item>
                        <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :label-width="options.labelWidth + 'px'" v-else-if="item.type=='number'">
                            <el-input-number v-model="params[item.prop]" :min="item.min" :max="item.max" :disabled="item.isDisabled" @keyup.enter.native="$event.target.blur" @blur="item.handleNumberBlur(params[item.prop])"></el-input-number>
                        </el-form-item>
                        <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :label-width="options.labelWidth + 'px'" v-else-if="item.type=='select'">
                            <el-select v-model="params[item.prop]" :placeholder="item.placeholder" :disabled="item.isDisabled" @change="item.handleSelectChange(params[item.prop])" filterable>
                                <template v-for="option in item.options">
                                    <el-option :key="option.value" :label="option.label" :value="option.value"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                        <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :label-width="options.labelWidth + 'px'" v-else-if="item.type=='cascader'">
                            <el-cascader v-model="params[item.prop]" :options="item.options" :placeholder="item.placeholder" :disabled="item.isDisabled" clearable expand-trigger="hover" @change="item.handleCascaderChange(params[item.prop])"></el-cascader>
                        </el-form-item>
                        <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :label-width="options.labelWidth + 'px'" v-else-if="item.type=='time'">
                            <el-time-picker v-model="params[item.prop]" :placeholder="item.placeholder" :range-separator="item.rangeSeparator" :start-placeholder="item.startPlaceholder" :end-placeholder="item.endPlaceholder" :value-format="item.valueFormat" :is-range="item.isRange" :disabled="item.isDisabled" @keyup.enter.native="$event.target.blur" @blur="item.handleTimeBlur(params[item.prop])"></el-time-picker>
                        </el-form-item>
                        <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :label-width="options.labelWidth + 'px'" v-else-if="item.type=='date'">
                            <el-date-picker v-model="params[item.prop]" :range-separator="item.rangeSeparator" :start-placeholder="item.startPlaceholder" :end-placeholder="item.endPlaceholder" :value-format="item.valueFormat" :disabled="item.isDisabled" type="daterange" v-if="item.isRange" @keyup.enter.native="$event.target.blur" @blur="item.handleDateBlur(params[item.prop])"></el-date-picker>
                            <el-date-picker v-model="params[item.prop]" :placeholder="item.placeholder" :value-format="item.valueFormat" :disabled="item.isDisabled" type="date" v-else @keyup.enter.native="$event.target.blur" @blur="item.handleDateBlur(params[item.prop])"></el-date-picker>
                        </el-form-item>
                        <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :label-width="options.labelWidth + 'px'" v-else-if="item.type=='datetime'">
                            <el-date-picker v-model="params[item.prop]" :range-separator="item.rangeSeparator" :start-placeholder="item.startPlaceholder" :end-placeholder="item.endPlaceholder" :value-format="item.valueFormat" :disabled="item.isDisabled" type="datetimerange" v-if="item.isRange" @keyup.enter.native="$event.target.blur" @blur="item.handleDateBlur(params[item.prop])"></el-date-picker>
                            <el-date-picker v-model="params[item.prop]" :placeholder="item.placeholder" :value-format="item.valueFormat" :disabled="item.isDisabled" type="datetime" v-else @keyup.enter.native="$event.target.blur" @blur="item.handleDateBlur(params[item.prop])"></el-date-picker>
                        </el-form-item>
                        <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :label-width="options.labelWidth + 'px'" v-else-if="item.type=='radio'">
                            <el-radio-group v-model="params[item.prop]" :disabled="item.isDisabled" @change="item.handleRadioChange(params[item.prop])">
                                <template v-for="option in item.options">
                                    <el-radio :key="option.value" :label="option.value">{{option.label}}</el-radio>
                                </template>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :label-width="options.labelWidth + 'px'" v-else-if="item.type=='checkbox'">
                            <el-checkbox-group v-model="params[item.prop]" :disabled="item.isDisabled" @change="item.handleCheckboxChange(params[item.prop])">
                                <template v-for="option in item.options">
                                    <el-checkbox :key="option.value" :label="option.value" :width="item.width">{{option.label}}</el-checkbox>
                                </template>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :label-width="options.labelWidth + 'px'" v-else-if="item.type=='pictureCard'">
                            <el-upload :action="item.action" list-type="picture-card">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="item.pictureCardDialogVisible">
                                <img :src="item.pictureCardDialogImageUrl">
                            </el-dialog>
                        </el-form-item>
                        <el-form-item :key="item.prop" :label="item.label" :label-width="options.labelWidth + 'px'" v-else-if="item.type=='tree'">
                            <el-tree ref="tree" :style="{ height: item.height + 'px' }" :data="initData.authorityData" :props="item.defaultProps" :node-key="item.nodeKey" :default-checked-keys="params[item.prop]" :current-node-key="item.currentKey" :highlight-current="item.isHighlightCurrent" :default-expand-all="item.isDefaultExpandAll" :expand-on-click-node="item.isExpandOnClickNode" :show-checkbox="item.isShowCheckbox" @check="(data,checkedData)=>{item.handleNodeCheck(data, checkedData, item)}">
                                <template slot-scope="{ node, data }">
                                    <div v-if="item.labelFormatter">
                                        <span v-html="item.labelFormatter(node, data)"></span>
                                    </div>
                                    <span v-else>{{node.label}}</span>
                                </template>
                            </el-tree>
                        </el-form-item>
                    </template>
                </div>
            </template>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'CommonForm',
    props: {
        options: {
            type: Object,
            required: true
        },
        rows: {
            type: Array,
            default: () => []
        },
        rules: {
            type: Object,
            default: () => {}
        },
        params: {
            type: Object,
            default: () => {}
        },
        initData: {
            type: Object,
            default: () => {}
        }
    },
    data () {
        return {

        }
    },
    methods: {
        // 验证表单
        validateForm(callback) {
            if(typeof callback === 'function'){
                this.$refs.form.validate((result) => {
                    if(result) {
                        callback()
                    }
                })
            }
        },
        // 重置表单
        resetForm() {
            this.$refs.form.resetFields()
        }
    }
}
</script>

<style scoped>
.common-form {
    border-top: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    padding: 20px 0
}
.common-form-row {
    display: flex
}
.el-form-item {
    flex: 1;
    margin-right: 10px
}
.buttons {
    text-align: center;
    margin-right: 0
}
.el-input {
    width: 100%
}
.el-input-number {
    width: 100%
}
.el-select {
    width: 100%
}
.el-cascader {
    width: 100%
}
.el-date-editor {
    width: 100%
}
.el-radio-group {
    width: 100%
}
img {
    width: 100%
}
.el-tree {
    overflow-y: auto;
    border-top: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5
}
</style>
